<template>
  <view class="content">
    <view class="showModle">
      <view class="page_section_spacing">
        <view class="swiper_item">
          <image class="s_hide" src="../../static/img/hide.png" @click="clickHide"></image>
          <view class="s_cant">
            <view class="s_titil">帮您选酒</view>
            <view class="s_etitil">Help you choose wine.</view>
            <view class="s_tit">文字说明文字说明</view>
            <view class="s_main">
              <view class="flex">
                <view :class="active == 0 ? 's_nav addActive' : 's_nav'" @click="changeNav(0)">单品</view>
                <view :class="active == 1 ? 's_nav addActive' : 's_nav'" @click="changeNav(1)">套餐</view>
              </view>
              <view class="card-list flex" v-if="active == 0">
                <view class="card" :class="{ show: singleCardShow }" @click="flop(0)">
                  <view class="card-face"><image class="card-img" mode="aspectFill" src="../../static/img/back.png" /></view>
                  <view class="card-back"><image class="card-img" mode="aspectFill" :src="singleGoods && singleGoods.thumb + '?imageView2/1/w/476/h/796/q/75'" /></view>
                </view>
              </view>
              <view class="card-list flex" v-if="active == 1">
                <view class="card" :class="{ show: backageCardShow }" v-for="(item, idx) in randomList" :key="idx" @click="flop(1, idx, 'package')">
                  <view class="card-face"><image class="card-img" mode="aspectFill" src="../../static/img/back.png" /></view>
                  <view class="card-back package-back" :class="{ active: packageActive[idx] }">
                    <image class="card-img" mode="aspectFill" :src="item.thumb + '?imageView2/1/w/476/h/796/q/75'" />
                  </view>
                </view>
              </view>
              <view class="flex">
                <!-- <view class="s_tip" @click="flop(active, 0, 'all')">翻牌</view> -->
                <view class="s_tip" @click="getRandomNext()">换一换</view>
              </view>
            </view>
            <view v-if="active && goodsArr.length" class="addBotton" @click="joinCar">加入购物车</view>
            <view v-else-if="!active && singleCardShow" class="addBotton" @click="joinCar">加入购物车</view>
            <view v-else class="addBotton disabled" >加入购物车</view>
          </view>
        </view>
      </view>
      <view class="cont_main" :class="{ show: isSingleDetail }">
        <view class="cont_detail">
          <view class="cont_info choose-info">
            <view class="cont_title">商品详情</view>
            <!-- <view class="cont_etitle">Commodity details</view> -->
            <!-- <view class="cont_etitle">{{ singleGoods && singleGoods.subtitle }}</view> -->
            <view class="cont_itms">
              <view class="cont_itm">名称：{{ singleGoods && singleGoods.title }}</view>
              <view class="cont_itm">酒精浓度: {{ singleGoods && singleGoods.degree }}</view>
              <!-- <view class="cont_itm">风格：{{ singleGoods &&  singleGoods.price }}</view>
            <view class="cont_itm">原产地：{{ singleGoods &&  singleGoods.goods_place }}</view>
            <view class="cont_itm">单瓶容量：{{ singleGoods && singleGoods.price }}ml</view> -->
              <view class="cont_itm">价格：{{ singleGoods && singleGoods.price }}元/{{ singleGoods && singleGoods.unit }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="cont_main" :class="{ show: isBackageDetail }">
        <view class="cont_detail">
          <view class="cont_info choose-info">
            <view class="cont_title">套餐详情</view>
            <!-- <view class="cont_etitle">Commodity details</view> -->
            <!-- <view class="cont_etitle">{{ singleGoods && singleGoods.subtitle }}</view> -->
            <view class="cont_itms" v-for="(item, idx) in backageList" :key="idx">
              <view class="cont_itm">名称：{{ item.title }}</view>
              <view class="cont_itm">酒精浓度: {{ item.degree }}</view>
              <!-- <view class="cont_itm">风格：{{  singleGoods.price }}</view>
              <view class="cont_itm">原产地：{{  singleGoods.goods_place }}</view>
              <view class="cont_itm">单瓶容量：{{ singleGoods.price }}ml</view> -->
              <view class="cont_itm">价格：{{ item.price }}元/{{ item.unit }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { GOODS_RANDOM, GOODS_RANDOM_BRAND, CART_ADD, CART_BATCH_ADD } from '@/api';
import goodsMixin from '@/mixins/goods.js'
export default {
  mixins: [goodsMixin],
  data() {
    return {
      singleGoods: null,
      randomList: [],
      tableId: this.$store.state.storeConf.table_id,
      deviceNum: this.$store.state.storeConf.device_num,
      storeId: this.$store.state.storeConf.store_id,
      attrId: 0,
      active: 0,
      // goodsId: '', //分类id
      singleCardShow: false,
      isSingleDetail: false,
      backageCardShow: false,
      isBackageDetail: false,
      backageList: [],
      packageActive: [0,0,0],
      goodsArr: []
    };
  },
  created() {
    this.getBackageGoodsList();
    this.getSingleGoods();
  },
  methods: {
    // 获取单品商品
    getSingleGoods() {
      let that = this;
      that.$_get(GOODS_RANDOM_BRAND, { store_id: that.storeId }).then(res => {
        if (res.code === 1) {
          this.singleGoods = res.data[0];
        }
      });
    },
    // 获取套餐列表
    getBackageGoodsList() {
      let that = this;
      that.$_get(GOODS_RANDOM, { store_id: that.storeId }).then(res => {
        if (res.code === 1) {
          this.randomList = res.data;
        }
      });
    },
    clickHide() {
      //点击隐藏
      this.$emit('chooseIsShow', false);
    },
    joinCar() {
      //加入购物车
      let that = this;
      if (that.active) {
        this.addCartPackage()
      } else {
        this.addCartSingle()
      }
    },
    // 套餐加入购物车
    addCartPackage () {
      let that = this
      if (that.backageCardShow) {
        if (!that.goodsArr.length) {
          uni.showToast({
            icon: 'none',
            title: '请先选择套餐'
          });
          return false
        }
        that
          .$_post(CART_BATCH_ADD, {
            table_id: that.tableId, 
            device_num: that.deviceNum,
            store_id: that.storeId,
            goods: JSON.stringify(that.goodsArr)
          }).then(res => {
            if (res.code) {
              that.clickHide();
              that.getCartList(that.tableId, that.storeId)
            } else {
              uni.showToast({
                icon: 'none',
                title: res.msg
              });
            }
          })
      } else {
        uni.showToast({
          icon: 'none',
          title: '请先翻牌再加入购物车'
        });
      }
    },
    // 单品加入购物车
    addCartSingle() {
      let that = this
      if (that.singleCardShow) {
        that
          .$_post(CART_ADD, {
            table_id: that.tableId,
            device_num: that.deviceNum,
            store_id: that.storeId,
            goods_id: that.singleGoods.id,
            attr_id: that.singleGoods && that.singleGoods.attrs ? that.singleGoods.attrs[0].id : 0,
            num: 1
          })
          .then(res => {
            if (res.code) {
              that.clickHide();
              that.getCartList(that.tableId, that.storeId)
            } else {
              uni.showToast({
                icon: 'none',
                title: res.msg
              });
            }
          });
      } else {
        uni.showToast({
          icon: 'none',
          title: '请先翻牌再加入购物车'
        });
      }
    },

    // 单品套餐切换
    changeNav(idx) {
      this.active = idx;
      this.isBackageDetail = false;
      this.isSingleDetail = false;
    },

    // 换一换
    getRandomNext() {
      if (this.active) {
        this.backageCardShow = false;
        this.isBackageDetail = false;
        this.packageActive = [0, 0, 0]
        this.getBackageGoodsList();
      } else {
        this.singleCardShow = false;
        this.isSingleDetail = false;
        this.getSingleGoods();
      }
    },

    // 点击翻牌
    flop(type, idx = 0, flopType = '') {
      //点击图片翻转
      let that = this
      if (type) {
        if (flopType === 'all' && !this.backageCardShow) {
          let packageItemActive = that.packageActive[idx]
          packageItemActive = 1
          that.$set(this.packageActive, idx, packageItemActive)
          this.getGoodsArr()
          this.backageCardShow = true;
        } else if (flopType != 'all') {
          let packageItemActive = that.packageActive[idx]
          packageItemActive = !packageItemActive
          that.$set(this.packageActive, idx, packageItemActive)
          this.isBackageDetail = true;
          this.backageList = this.randomList[idx].good;
          this.backageCardShow = true;
          this.getGoodsArr()
        }
        //  else {
        //   let packageItemActive = that.packageActive[idx]
        //   packageItemActive = 1
        //   that.$set(this.packageActive, idx, packageItemActive)
        //   this.getGoodsArr()
        //   this.backageCardShow = true;
        // }
      } else {
        if (this.singleCardShow) {
          this.isSingleDetail = true;
        } else {
          this.singleCardShow = true;
        }
      }
    },
    getGoodsArr(){
      // 获取批量goods
      let that = this
      that.goodsArr = []
      that.packageActive.map((item, idx) => {
        if (item) {
          that.randomList[idx].good.map(good => {
            that.goodsArr.push({
              attr_id: good.attr_id,
              goods_id: good.id
            })
          })
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
/* 遮罩 */
.cont_main {
  height: 54vw;
  margin-top: -27vw;
}
.swiper_item {
  position: relative;
  background: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 10px;
}
.s_cant {
  padding: 0 9vw;
}
.s_hide {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 20px;
  right: 24px;
}

.s_titil {
  padding-top: 4vw;
  font-size: 2vw;
}
.s_etitil {
  font-size: 11px;
}
.s_tit {
  font-size: 12px;
  margin-top: 10px;
}

.s_main {
  margin-top: 20px;
}
.s_nav {
  width: 25vw;
  height: 4vw;
  background: #fef7e7;
  text-align: center;
  line-height: 4vw;
}
.addActive {
  background: #c9ab6f;
}
.s_tip {
  width: 9vw;
  height: 3vw;
  background: #c9ab6f;
  border-radius: 1.5vw;
  text-align: center;
  line-height: 3vw;
  font-size: 1.5vw;
  color: #ffffff;
  margin: 1vw auto 0;
  padding: 0 1vw;
  box-shadow: 0px 0px 8px #c9ab6f;
}
.addBotton {
  width: 100%;
  height: 5vw;
  line-height: 5vw;
  background: #c9ab6f;
  font-size: 20px;
  color: #ffffff;
  margin-top: 2vw;
  text-align: center;
  &.disabled{
    background-color: #999;
  }
}

// 翻牌
.card-list {
  margin: 3vw auto 2vw;
  height: 19vw;
}
.card-list .card {
  position: relative;
  width: 12vw;
  height: 19vw;
  -webkit-perspective: 600px; /*兼容 Safari and Chrome */
  -moz-perspective: 600px; /*兼容 Firefox 4 */
  -ms-perspective: 600px;
  perspective: 600px;
  flex: 1;
}

.card-list .card-face,
.card-list .card-back {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -6vw;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; /*规定以慢速开始和结束的过渡效果*/
  -webkit-transform-style: perspective-3d;
  -moz-transform-style: perspective-3d;
  -ms-transform-style: perspective-3d;
  transform-style: perspective-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden; /*如果在旋转元素不希望看到其背面时，该属性很有用。*/
}

.card-list .card-face {
  z-index: 2; /*这个属性控制牌的背面在最上层*/
}

.card-list .card-back {
  z-index: 1;
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.card-list .card.show .card-face {
  z-index: 1; /*当鼠标在上面，-1，变为底下*/
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.card-list .card.show .card-back {
  z-index: 2;
  -webkit-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

.card-img {
  width: 12vw;
  height: 19vw;
  border-radius: 10px;
  box-shadow: 0 0 10px 2px rgba(85, 85, 85, 0.3);
}
.package-back{
  &:after{
    display: inline-block;
    content: '✔';
    color: #999;
    width: 0;
    height: 0;
    border-top: 2vw solid transparent;
    border-left: 2vw solid transparent;
    border-right: 2vw solid #ccc;
    border-bottom: 2vw solid #ccc;
    position: absolute;
    font-size: 18px;
    line-height: 1.5vw;
    vertical-align: middle;
    bottom: 4px;
    right: 0;
    border-bottom-right-radius: 5px;
  }
  &.active:after{
    border-right-color: orange;
    border-bottom-color: orange;
    color: #fff;
  }
}
</style>
